<template>
  <q-page class="q-pa-md">
    <div class="q-pb-md text-h5">
      {{ pageTitle }}
      <span class="text-subtitle1">{{ pageSubTitle }}</span>
    </div>
    <div class="q-pa-sm shadow-2 q-mb-md">
      <div class="q-gutter-sm">
        <q-btn @click="detailNav.goBackToList" color="primary" icon="arrow_back" outline title="返回" />
        <q-btn :disable="loadingState" :loading="loadingState" @click="loadModelData" color="primary" dense
          icon="refresh" outline title="刷新" />
      </div>
    </div>
    <div class="shadow-2 q-mt-md">
      <q-tabs active-color="primary" align="left" dense indicator-color="primary" v-model="showingTabPanel">
        <q-tab :label="'叫料通知' + pageSubTitle" name="NotifyMaterial" />
        <q-tab label="叫料通知明细" name="NotifyMaterialLineList" />
        <q-tab :label="ldsLine.tabTitle.value" name="NotifyMaterialLineDetail" v-if="ldsLine.isLineTabDisp.value" />
      </q-tabs>
      <q-separator />
      <q-tab-panels :keep-alive-include="['NotifyMaterial','NotifyMaterialLineList']" keep-alive v-model="showingTabPanel">
        <q-tab-panel class="q-pa-sm" name="NotifyMaterial">
          <form-field-group :model-with-create-update="$d.form" model-id="notifyId" title="主要信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>服务名称</span>
                  <easy-input :model-value="$d.form.serviceCode" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>接口账号</span>
                  <easy-input :model-value="$d.form.dataSource" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>是否成功</span>
                  <easy-input :model-value="$d.form.isSuccess?'是':'否'" readonly/>
                </div>
              </div>
              <div class="row q-col-gutter-sm q-pt-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>TraceId</span>
                  <easy-input :model-value="$d.form.requestId" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>保税仓库编码</span>
                  <easy-input :model-value="$d.form.bondedWarehouseCode" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>目标仓库编码</span>
                  <easy-input :model-value="$d.form.destWarehouseCode" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>sto单号</span>
                  <easy-input :model-value="$d.form.stoOrderNo" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>优先级</span>
                  <easy-input :model-value="$d.form.priority" readonly/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>wms出库单序号</span>
                  <easy-input :model-value="$d.form.wOrderId" readonly/>
                </div>
                <div class="col-12">
                  <span>错误信息</span>
                  <easy-input :model-value="$d.form.backMsg" readonly type="textarea" :rows="3"/>
                </div>
                <div class="col-12">
                  <span>原始请求数据</span>
                  <easy-input :model-value="$d.form.rawData" readonly type="textarea" :rows="6"/>
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
        <q-tab-panel class="q-pa-none" name="NotifyMaterialLineList">
          <div class="row q-col-gutter-sm q-mb-sm items-center q-pt-sm">
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">STO行号</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.palletStoLine" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">托盘id</div>
              <div class="col-8">
                <easy-input v-model="lineFpsReq.palletId" :readonly="lineListDataLoadingState" @focus="fx.ui.select"
                  @keyup.enter="loadLineListData(2)" />
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div class="col-4 text-right searchbar-label">托盘/箱</div>
              <div class="col-8">
                <simple-filter-select :options="['托盘','箱']" v-model="lineFpsReq.palletOrBoxFlag" :readonly="lineListDataLoadingState"/>
              </div>
            </div>
            <div class="col-12 col-sm-6 col-md-4 col-lg-3 row q-col-gutter-sm">
              <div>
                <q-btn color="primary" icon="search" label="查询" @click="loadLineListData" class="col-auto" />
              </div>
            </div>
          </div>
          <q-separator />
          <q-table :columns="fpsInfo.columnsInfo" :rows="$d.lineTableData" :loading="lineListDataLoadingState"
            :visible-columns="fpsInfo.visibleColumns" v-model:pagination="fpsInfo.paginationInfo"
            @row-dblclick="(evt,row)=>{ldhLine.lineDetailNav.goViewLine(row.lineId)}" color="primary" dense flat
            row-key="lineId" separator="cell">
            <template v-slot:top="props">
              <q-space />
              <table-col-options-cfg v-model:visible-columns="fpsInfo.visibleColumns"
                v-model:table-columns="fpsInfo.columnsInfo" class="q-mx-sm"
                @update-col-options-for-save="fpsAssist.saveColOptions"></table-col-options-cfg>
              <q-btn :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"
                class="q-ml-sm" dense flat />
            </template>
            <template v-slot:body-cell-operation="props">
              <q-td :props="props" auto-width>
                <q-btn dense :disable="loadingState" @click="ldhLine.lineDetailNav.goViewLine(props.row.lineId)"
                  color="primary" label="查看" class="btn-in-row q-mr-xs" />
              </q-td>
            </template>
            <template v-slot:no-data>
              <div class="full-width text-center">
                <q-icon name="error_outline" />
                无数据
              </div>
            </template>
            <!--客户端分页-->
            <template v-slot:bottom>
              <paging-bar :loading-state="lineListDataLoadingState" :pageNo="lineFpsReq.pageNo" :pageSize="lineFpsReq.pageSize"
                :totalAmount="fpsInfo.totalAmount" @pagesize-changed="fpsAssist.onPageSizeChanged"
                @go-to-page="fpsNav.gotoPage" />
            </template>
          </q-table>
        </q-tab-panel>
        <q-tab-panel class="q-pa-sm" name="NotifyMaterialLineDetail">
          <div class="q-gutter-sm">
            <q-btn @click="ldhLine.lineDetailNav.backToListTab" color="primary" icon="close" outline title="关闭"
              v-if="ldsLine.isLineViewMode.value" />
            <q-btn :disable="lineLoadingState" :loading="lineLoadingState"
              @click="loadLineModelData" color="primary" dense
              icon="refresh" outline title="刷新" v-if="ldsLine.isLineViewOrEditMode.value" />
          </div>
          <form-field-group class="q-mt-sm" :model-with-create-update="ldhLine.lineDetailInfo.lineForm"
            model-id="lineId" title="主要信息">
            <div class="q-pa-sm">
              <div class="row q-col-gutter-sm">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>STO行号</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.palletStoLine" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>托盘id</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.palletId" readonly />
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                  <span>托盘/箱</span>
                  <easy-input :model-value="ldhLine.lineDetailInfo.lineForm.palletOrBoxFlag" readonly />
                </div>
              </div>
            </div>
          </form-field-group>
        </q-tab-panel>
      </q-tab-panels>
    </div>
  </q-page>
</template>

<script lang="ts">
export default {
  name: 'NotifyMaterial'
}
</script>

<script lang="ts" setup>

import {useTitleHelper} from '@njt/foundation/hooks/titleHelper'
import {useDetailHelper} from '@njt/foundation/hooks/detailHelper'
import {reactive, ref} from 'vue'
import {
  GetNotifyMaterialLineReq,
  GetNotifyMaterialLineResp,
  NotifyMaterialInfo,
  NotifyMaterialLine
} from 'src/defs/sf/notifyMaterial'
import {ColumnInfo} from '@njt/foundation/defs/comm'
import {useLineDetailHelper} from '@njt/foundation/hooks/lineDetailHelper'
import {useFpsHelper} from '@njt/foundation/hooks/fpsHelper'

const pageTitle = '叫料通知'
useTitleHelper(pageTitle)
let loadingState = ref(false)
let lineListDataLoadingState = ref(false)
let showingTabPanel = ref('NotifyMaterial')

const $d = reactive({
  form: {} as NotifyMaterialInfo,
  lineTableData: [] as NotifyMaterialLine[],
})

const loadModelData = function () {
  loadingState.value = true
  $f.axios
    .get<NotifyMaterialInfo>('/mhlbc/sf/get-notify-material-by-id/' + detailInfo.itemId)
    .then((resp) => {
      $d.form = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      loadingState.value = false
    })
}

const {
  detailInfo,
  detailStatus,
  detailNav
}  = useDetailHelper('/sf/notify-material',
  $d.form,
  null,
  '/sf/notify-material',
  '/sf/notify-material/detail',
  null,
  null,
  loadModelData,
  null
)
const {
  pageSubTitle
} = detailStatus


let lineFpsReq: GetNotifyMaterialLineReq = reactive({
  palletId: null,
  notifyId: Number(detailInfo.itemId),
  palletStoLine: null,
  palletOrBoxFlag: null,
  pageNo: 1,
  pageSize: 40,
  orderBy: null,
  isDescending: false
})

let columnsInfoLine: ColumnInfo[] = [
  {
    label: '操作',
    name: 'operation',
    field: 'operation',
    align: 'left',
    defOrder: 1,
    defVisible: true
  },
  {
    label: '序号',
    name: 'lineId',
    field: 'lineId',
    align: 'left',
    defOrder: 2,
    sortable: true,
    defVisible: true
  },
  {
    label: 'STO行号',
    name: 'palletStoLine',
    field: 'palletStoLine',
    align: 'left',
    defOrder: 3,
    defVisible: true
  },
  {
    label: '托盘id',
    name: 'palletId',
    field: 'palletId',
    align: 'left',
    defOrder: 5,
    defVisible: true
  },
  {
    label: '托盘/箱',
    name: 'palletOrBoxFlag',
    field: 'palletOrBoxFlag',
    align: 'left',
    defOrder: 3,
    defVisible: true
  }
]

const loadLineListData = function (resetFpsReq?: number) {
  if (resetFpsReq) {
    if (resetFpsReq >= 1) {
      lineFpsReq.pageNo = 1
    }
    if (resetFpsReq >= 2) {
      lineFpsReq.orderBy = ''
      lineFpsReq.isDescending = false
    }
  }
  lineListDataLoadingState.value = true
  $f.axios
    .get<GetNotifyMaterialLineResp>('/mhlbc/sf/get-notify-material-line-list', {params: lineFpsReq})
    .then((resp) => {
      fpsAssist.handleGenericFpsResp(resp.data)
      $d.lineTableData = resp.data.notifyMaterialLines
      fpsAssist.saveFpsReq(lineFpsReq)
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineListDataLoadingState.value = false
    })
}

const {
  fpsInfo,
  fpsAssist,
  fpsNav
} = useFpsHelper('/sf/notify-material_line',
  null,
  null,
  null,
  lineFpsReq, columnsInfoLine,
  null,
  loadLineListData)

let lineLoadingState = ref(false)
const loadLineModelData = function () {
  lineLoadingState.value = true
  $f.axios
    .get<NotifyMaterialLine>('/mhlbc/sf/get-notify-material-line-by-id/' + String(ldhLine.lineDetailInfo.lineItemId))
    .then((resp) => {
      ldhLine.lineDetailInfo.lineForm = resp.data
    })
    .catch((err) => {
      $f.ui.showNotifyFailed($f.getAxiosErrMsg(err))
    })
    .finally(() => {
      lineLoadingState.value = false
    })
}

const ldhLine = useLineDetailHelper(
  '叫料通知明细',
  'NotifyMaterialLineList',
  'NotifyMaterialLineDetail',
  {},
  loadLineModelData,
  showingTabPanel,
  null,
  () => {
    // ignore
  },
)

const ldsLine = ldhLine.lineDetailStatus

const fx = $f

</script>

<style scoped>

</style>